<template>
	<view class="container">		
		<view class="page_bg" :style="'background-image:url('+apiurl+'static/map.jpg);'"></view>
		
			
		<view class="cover" @click="tab_show = false" v-if="tab_show"></view>
		<view class="cover_header pos-top w-100 bg-white border-b1 border-t1">
			<view class="map_search uni-flex justify-space-between border">
				<uni-easyinput prefixIcon="search" v-model="keyword" placeholder="输入小区名称" :clearable="false"></uni-easyinput>
				<view class="map_search_btn text-blue" @click="searchChange('keyword', keyword)">搜索</view>
			</view>
							
			<view class="project_tabc bg-white round-10 m-t30">
				<view class="project_tab text-center uni-flex justify-space-between text-gray6">
					<view class="project_tab_item" @click="projectTab(0)">
						<text class="m-r10">新老房型</text>
						<uni-icons type="bottom" color="#999" size="12"></uni-icons>
					</view>
					<view class="project_tab_item project_tab_item1" @click="projectTab(1)">
						<text class="m-r10">所有面积</text>
						<uni-icons type="bottom" color="#999" size="12"></uni-icons>
					</view>
					<view class="project_tab_item" @click="projectTab(2)">
						<text class="m-r10">所有风格</text>
						<uni-icons type="bottom" color="#999" size="12"></uni-icons>
					</view>
				</view>
				<view v-if="tab_show">
					<view class="project_tab_cont border-t1 tab_0" v-if="tabIndex == 0">
						<view class="tab_title fs14 fw600 p-b30">房型</view>
						<view class="tab_items fs12 text-gray9 text-center uni-flex flex-wrap">
							<view :class="'tab_item '+(form.old_new == '' ? 'tab_active' : '')" @click="searchChange('old_new', '')">全部</view>
							<view :class="'tab_item '+(form.old_new == 'new' ? 'tab_active' : '')" @click="searchChange('old_new', 'new')">新房装修</view>
							<view :class="'tab_item '+(form.old_new == 'old' ? 'tab_active' : '')" @click="searchChange('old_new', 'old')">老房改造</view>
						</view>
					</view>
					<view class="project_tab_cont border-t1 tab_1" v-else-if="tabIndex == 1">
						<view class="tab_title fs14 fw600 p-b30">面积</view>
						<view class="tab_items fs12 text-gray9 text-center uni-flex flex-wrap">
							<view :class="'tab_item '+(form.area == '' ? 'tab_active' : '')" @click="searchChange('area', '')">全部</view>
							<view :class="'tab_item '+(form.area[1] == 70 ? 'tab_active' : '')" @click="searchChange('area', [0, 70])">70㎡以下</view>
							<view :class="'tab_item '+(form.area[1] == 90 ? 'tab_active' : '')" @click="searchChange('area', [70, 90])">70㎡-90㎡</view>
							<view :class="'tab_item '+(form.area[1] == 120 ? 'tab_active' : '')" @click="searchChange('area', [90, 120])">90㎡-120㎡</view>
							<view :class="'tab_item '+(form.area[1] == 150 ? 'tab_active' : '')" @click="searchChange('area', [120, 150])">120㎡-150㎡</view>
							<view :class="'tab_item '+(form.area[1] == 200 ? 'tab_active' : '')" @click="searchChange('area', [150, 200])">150㎡-200㎡</view>
							<view :class="'tab_item '+(form.area[1] == 0 ? 'tab_active' : '')" @click="searchChange('area', [200, 0])">200㎡以上</view>
						</view>
					</view>
					<view class="project_tab_cont border-t1 tab_2" v-else-if="tabIndex == 2">
						<view class="tab_title fs14 fw600 p-b30">风格</view>
						<view class="tab_items fs12 text-gray9 text-center uni-flex flex-wrap">
							<view :class="'tab_item '+(form.style_code == '' ? 'tab_active' : '')" @click="searchChange('style_code', '')">全部</view>
							<view v-for="item in styleList" :class="'tab_item '+(form.style_code == item.code ? 'tab_active' : '')" @click="searchChange('style_code', item.code)">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
		<view class="page_cont">
			
			<view class="cover_footer">
				<view class="uni-flex justify-space-between m-b30">
					<view class="total bg-white p-l30 p-r30 fs12 text-blue">附近有{{total || 0}}个工地</view>
					
					<view class="map_tab bg-white uni-flex justify-left fs12">
						<view class="map_tab_item text-gray3" @click="goPage('map', '')">
							<uni-icons type="location" color="#333" size="16"></uni-icons> <text class="map_tab_label">地图</text></view>
						<view class="map_tab_item map_tab_active text-white bg-blue round-40">
							<uni-icons type="list" color="#fff" size="16"></uni-icons> <text class="map_tab_label">列表</text></view>
					</view>
				</view>
			</view>
			
			
			<view class="cover_list m-t30 m-b30" v-if="list && list.length > 0">
				<view class="marker bg-white round-10 p-20 fs12 m-t20 uni-flex justify-space-between" v-for="item in list" @click="goPage('project', item.id)">
					<view class="marker_image m-r20">
						<image class="marker_img round-10" :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="w-70">
						<view class="marker_title fs15 fw600"> {{ item.title }} </view>
						<view class="marker_cont uni-flex justify-space-between">
							<view class="marker_info text-gray9">
								{{ item.area }}㎡
								{{ item.type ? ' | '+item.type.title  : '' }}
								{{' | ' + ( item.old_new == 'new' ? '新房装修' : '老房改造')  }}
							</view>
						</view>
						<view class="uni-flex justify-space-between">
							<view class="text-gray9 fs12">设计师({{item.service.DesignerName || ""}})</view>
							<view class="cover_label bg-blue text-white fs10 round-10">{{ item.project || "开工" }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { caseCovers, styleList } from "@/api/house.js"

import urlConfig from '@/common/config.js';
let that;
export default {
	data() {
		return {
			apiurl: urlConfig,
			
			tab_show: false,
			tabIndex: 0,
			
			keyword: "",
			form: {
				old_new: '',
				area: '',
				style_code: ''
			},
			pages: {
				page: 1,
				size: 10,
				loading: true
			},
			
			styleList: [],
			list: [],
			total: 0,
			marker: "",		//当前点击的标记
		}
	},
	onLoad(e){
		that = this
		that.code = e.code ? e.code : ""
		that.getList()
		that.getStyleList()
	},
	onReachBottom(e){
		that.pages.page++
		that.getList()
	},
	methods: {		
		projectTab(index){
			that.tabIndex = index
			that.tab_show = true
		},
		searchChange(type, value) {
			that.tab_show = false
			if(type != "keyword") {
				that.form[type] = value
			}
			that.pages.page = 1
			that.pages.loading = true
			that.getList()
		},
		/**
		 * 风格
		 */
		getStyleList(){
			let that = this
			styleList({ condition:{state:1} }).then(res => {
				that.styleList = res.data
			})
		},
		/**
		 * 获取工地案例
		 */
		getList() {
			if(!that.pages.loading) return
			that.pages.loading = false
			caseCovers({
				page: that.pages.page,
				size: that.pages.size,
				order: "sort asc",
				keyword: that.keyword,
				condition: that.form			
			}).then(res => {				
				that.pages.loading = true
				let data = res.data
				that.total = data.total
				let list = []
				if(that.pages.page == 1) list = data.list
				else list = [...that.list, ...data.list]
				that.list = list
			})
		},
		goPage(type, content) {
			let url = ''
			if(type == "map") { 
				uni.navigateBack(-1)
				return
				
			}else if(type == "project") {
				url = `/pages/near/detail?id=${content}`
				
			}
			uni.navigateTo({
				url: url
			})
		}
	},
}
</script>

<style>
.page_bg {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: blur(2px);
	background-size: cover;
}
.page_cont {
    position: relative;
    z-index: 2;
    margin-top: 230rpx;
    width: 90%;
    margin-left: 5%;
}
.project_tabc {
	border-top: 1px solid #f8f8f8;
}
.project_tab {
	line-height: 35px;
	height: 35px;
}
.project_tab_item {
	width: 33.3333%;
}
.project_tab_item1::before {
	border-left: 2rpx solid #e0e0e0;
	border-right: 2rpx solid #e0e0e0;
}
.project_tab_cont {
	padding: 30rpx;
}
.tab_item {
	width: 30%;
	margin-right: 5%;
	margin-bottom: 20rpx;
	line-height: 32px;
	height: 32px;
	text-align: center;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	box-sizing: border-box;
}
.tab_item:nth-child(3n) {
	margin-right: 0;
}
.tab_active {
	border-color: #007AFF;
	color: #007AFF;
}

.cover_header {
	position: fixed;
	z-index: 10;
}
.cover_footer {
	bottom: 30rpx;
	position: fixed;
	z-index: 10;
	width: 90%;
	left: 5%
}
.map_search {
	width: 90%;
	margin: 30rpx 5% 0;
	border-radius: 8rpx;
	height: 70rpx;
	line-height: 70rpx;
	background-color: #eaeaea;
	border-radius: 40rpx;
	overflow: hidden;
}
.map_search_btn {
	width: 18vw;
	right: 0;
	top: 0;
	line-height: 35px;
	text-align: center;
}
.uni-easyinput__content {
	border: none !important;
	width: 82vw;
	height: 35px;
	background-color: #eaeaea !important;
}
.map_tab , .total {
	width: 140px;
	height: 30px;
	line-height: 30px;
	border-radius: 50px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.total {
	width: auto;
}
.map_tab_item {
	width: 50%;
}
.map_tab_label {
	margin-left: 4rpx;
}
.map_tab , .total {
	width: 140px;
	height: 30px;
	line-height: 30px;
	border-radius: 50px;
	overflow: hidden;
	text-align: center;
}
.total {
	width: auto;
}

.marker_image {
	width: 100px;
	height: 100px;
}
.marker_img {
	width: 100%;
	height: 100%;
}
.marker_title {
	height: 40px;
	line-height: 20px;
	white-space: pre-line; /*允许换行*/
	overflow: hidden;
	text-overflow: ellipsis; /*省略号*/
	display: -webkit-box;
	-webkit-box-orient: vertical; /*行向垂直排列*/
	-webkit-line-clamp: 2; /*限制2行*/
}
.marker_info {
	margin: 11px 0;
}
.cover_label {
	padding: 0 16rpx;
	line-height: 18px;
	height: 18px;
	display: inline-block;
}
.marker_view {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
}
.cover_list {
	
}
</style>